<!--
  * 字典 value 弹窗
  * 
  * @Author:    admin 
  * @Date:      2022-06-08 21:50:41 
    
   
  * @Copyright  jiaoyuyun.org.cn 
-->
<template>
  <a-drawer :width="1200" :open="visible" :body-style="{ paddingBottom: '80px' }" title="订单" @close="onClose">
    <a-card size="small" :bordered="false">
    <a-form class="smart-query-form">
        <a-row class="smart-query-form-row" v-privilege="'support:order:query'">
            <a-form-item label="订单编号" class="smart-query-form-item">
                <a-input style="width: 200px" v-model:value="queryForm.orderId" placeholder="订单编号" />
            </a-form-item>
            <a-form-item label="订单类型" name="orderKind" class="smart-query-form-item">
                <SmartEnumSelect enum-name="ORDERS_STATUS_ENUM" v-model:value="queryForm.orderKind" width="160px" />
            </a-form-item>
              <!-- <a-form-item label="订单类型" name="orderKind">
        <a-select v-model:value="form.orderKind" placeholder="请输入订单类型" >
          <a-select-option value="">全部</a-select-option>
          <a-select-option value="0">代取快递</a-select-option>
          <a-select-option value="1">代买物品</a-select-option>
          <a-select-option value="2">代取外卖</a-select-option>
          <a-select-option value="3">代办事</a-select-option>
        </a-select> -->
        <a-form-item label="下单时间" class="smart-query-form-item" style="margin-right: 20px">
        <a-range-picker
          v-model:value="chooseTimeRange"
          @change="changeCreateDate"
          :presets="defaultTimeRanges"
          format="YYYY-MM-DD"
          style="width: 240px"
        />
      </a-form-item>
        <a-form-item class="smart-query-form-item">
                <a-button type="primary" @click="ajaxQuery">
                    <template #icon>
                        <SearchOutlined />
                    </template>
                    查询
                </a-button>
                <a-button @click="resetQuery" class="smart-margin-left10">
                    <template #icon>
                        <ReloadOutlined />
                    </template>
                    重置
                </a-button>
            </a-form-item>
        </a-row>
    </a-form>

    <a-table      
      size="small"
      :dataSource="tableData"
      :columns="columns"
      rowKey="orderId"
      bordered
      :pagination="false"
      
      @expandedRowsChange="changeExand"
      :expanded-row-keys="expandedRowKeys"
    >
      <template #bodyCell="{ index,record,text,column}">
        <span v-if="column.dataIndex === 'serialNumber'">{{ index + 1 }}</span>

                <template v-if="column.dataIndex === 'orderStateName'">
                  <div v-if="record.orderStateName==='已完成'">                    

                        <a-tag color="success">
                            <template #icon >
                                <check-circle-outlined />
                            </template>
                                {{ record.orderStateName }}
                        </a-tag>
                    </div>

                    <div v-if="record.orderStateName!=='已完成'&record.orderStateName!=='已超时'">
                        <a-tag color="warning">
                        <template #icon >
                               <sync-outlined :spin="true" />
                        </template>
                            {{ record.orderStateName }}
                    </a-tag>
                    </div>
                        <div v-if="record.orderStateName==='已超时'">
                        <a-tag color="error">
                        <template #icon >
                              <close-circle-outlined />
                        </template>
                            {{ record.orderStateName }}
                        </a-tag>
                    </div>
                </template>
      <template v-if="column.dataIndex === 'orderKind'">
        <span>{{ $smartEnumPlugin.getDescByValue('ORDERS_STATUS_ENUM', text) }}</span>
      </template>
      </template>
    </a-table>
      <div class="smart-query-table-page">
        <a-pagination
          showSizeChanger
          showQuickJumper
          show-less-items
          :pageSizeOptions="PAGE_SIZE_OPTIONS"
          :defaultPageSize="queryForm.pageSize"
          v-model:current="queryForm.pageNum"
          v-model:pageSize="queryForm.pageSize"
          :total="total"
          @change="ajaxQuery"
          @showSizeChange="ajaxQuery"
          :show-total="(total) => `共${total}条`"
        />
      </div>
    </a-card>
  </a-drawer>
</template>
<script setup>
  import { onMounted,reactive, ref } from 'vue';
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { orderApi } from '/@/api/business/order/order-api';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { ORDERS_STATUS_ENUM } from '/@/constants/support/orders-const';
  import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
  import { Modal } from 'ant-design-vue';
  import { message } from 'ant-design-vue';
  import { smartSentry } from '/@/lib/smart-sentry';

  // 是否展示抽屉
  const visible = ref(false);
  const ID = ref(undefined);
  function changeExand(val) {
    expandedRowKeys.value = val;
  }
  function showModal(jdyId) {
    ID.value = jdyId;
    visible.value = true;
    ajaxQuery();
  }

  function changeCreateDate(value, dateString) {
    queryForm.startDate = dateString[0];
    queryForm.endDate = dateString[1];
  }
  function onClose() {
    visible.value = false;
    ID.value = undefined;
  }

      const columns = ref([
        {
          title: '序号',
          dataIndex: 'serialNumber', // 这个dataIndex仅作为标识，不对应实际数据字段
          width: '80px', // 可以自定义宽度
          scopedSlots: { customRender: 'bodyCell' }, // 对应模板中的具名插槽
          align:"center"
        },
        {
            title: '订单编号',
            dataIndex: 'orderId',
            width:200,
            ellipsis: true,
            align:"center"

        },
        {
            title: '订单类型',
            dataIndex: 'orderKind',
            ellipsis: true,
            align:"center"

        },
        // {
        //     title: '取货地址',
        //     dataIndex: 'orderStartName',
        //     width:200,
        //     ellipsis: true,
        //     align:"center"
        // },
        // {
        //     title: '配送地址',
        //     dataIndex: 'orderEndName',
        //     ellipsis: true,
        //     align:"center"
        // },
        {
            title: '截止时间',
            dataIndex: 'deadTime',
            ellipsis: true,
            align:"center"
        },
        // {
        //     title: '备注',
        //     dataIndex: 'reMark',
        //     ellipsis: true,
        //     align:"center"
        // },
        {
            title: '完成时间',
            dataIndex: 'competeTime',
            ellipsis: true,
            align:"center"
        },
        {
            title: '用户昵称',
            dataIndex: 'userName',
            ellipsis: true,
            align:"center"
        },
        {
            title: '订单状态',
            dataIndex: 'orderStateName',
            ellipsis: true,
            align:"center"
        },
        // {
        //     title: '操作',
        //     dataIndex: 'action',
        //     fixed: 'right',
        //     width: 90,
        //     align:"center"
        // },
    ]);
  // ----------------------- 表格 查询 ------------------------

  const queryFormState = {
        orderId:'',
        orderKind:ORDERS_STATUS_ENUM.ALL.value,
        startDate: undefined,
        endDate:undefined,
        jdyId:'',
        pageNum: 1,
        pageSize: 10,
  };
  const queryForm = reactive({ ...queryFormState });
  const selectedRowKeyList = ref([]);
  const tableLoading = ref(false);
  const tableData = ref([]);
  const total = ref(0);

  function onSelectChange(selectedRowKeys) {
    selectedRowKeyList.value = selectedRowKeys;
  }

  function resetQuery() {
    Object.assign(queryForm, queryFormState);
    ajaxQuery();
  }
  async function ajaxQuery() {
    try {
      tableLoading.value = true;
      queryForm.jdyId = ID.value;
      let responseModel = await orderApi.queryPageByJdyId(queryForm);
      // const list = responseModel.data.list;
      total.value = responseModel.data.total;
      tableData.value = responseModel.data.list;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }
  const expandedRowKeys = ref([]);
  function reloadList(jdyId) {
    ajaxQuery();
    if (jdyId) {
      expandedRowKeys.value.push(jdyId);
    }
  }
  // ----------------------- 批量 删除 ------------------------

  // function confirmBatchDelete() {
  //   Modal.confirm({
  //     title: '提示',
  //     content: '确定要删除选中值吗?',
  //     okText: '删除',
  //     okType: 'danger',
  //     onOk() {
  //       batchDelete();
  //     },
  //     cancelText: '取消',
  //     onCancel() {},
  //   });
  // }

  const batchDelete = async () => {
    try {
      SmartLoading.show();
      await dictApi.valueDelete(selectedRowKeyList.value);
      message.success('删除成功');
      ajaxQuery();
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      SmartLoading.hide();
    }
  };

  // ----------------------- 弹窗表单操作 ------------------------

  // const operateModal = ref();
  // function addOrUpdateValue(rowData) {
  //   operateModal.value.showModal(rowData, dictKeyId.value);
  // }

  // onMounted(ajaxQuery);
  defineExpose({
    showModal,
  });
</script>
